<template lang="">
    <div>
        <div style="background: #F5F7FB;">
            <van-tabs v-model:active="tab" @click-tab="onClickTab">
                <van-tab title="基本资料" name="zl"></van-tab>
                <van-tab title="随访" name="sf"></van-tab>
                <van-tab title="量表" name="lb"></van-tab>
                <van-tab title="档案" name="da"></van-tab>
                <van-tab title="科研组" name="ky"></van-tab>
            </van-tabs>
           <div class="top">
                <div class="top-img">
                    <van-image round width="4rem" height="4rem" 
               src="/static/img/head.png" class="img" />
                    <div class="top-name">{{patient.name}}</div>
                </div>
           </div>
            <div style="margin-top:0.5vh">
                <div class="item">
                    <div class="item-left">身份证号</div>    
                    <div class="item-right">{{patient.idcard}}</div>
                </div>
                <div class="item">
                    <div class="item-left">年龄</div>    
                    <div class="item-right">{{patient.age}}</div>
                </div>
                <div class="item">
                    <div class="item-left">手机号码</div>    
                    <div class="item-right">{{patient.mobile}}</div>
                </div>
                <div class="item">
                    <div class="item-left">现居地</div>    
                    <div class="item-right">{{patient.address}}</div>
                </div>
                <div class="item">
                    <div class="item-left">诊断标签</div>    
                    <div class="item-right tag-list">
                        <div class="tag-sys" v-for="(tag, index) in patient.tag" :key="index">{{tag}}</div>
                        <div class="tag" v-for="(tag, index) in patient.tag_other" :key="index">{{tag}}</div>
                    </div>
                </div>
                 <div class="more-btn" @click="goToDetail">查看详情</div>
            </div>

            <div style="margin-top:1vh;background:#FFFFFF">
                <div class="title">诊断标签</div>
                <div class="tag-container">
                    <div class="tag-sys">发育不良</div>  
                    <div class="tag-sys">发育不良</div>  
                    <div class="tag-sys">发育不良</div>
                    <div class="tag-sys">发育不良</div>  
                    <div class="tag-sys">发育不良</div>  
                    <div class="tag-sys">发育不良</div>
                    <div class="tag-sys">发育不良</div>  
                    <div class="tag-sys">发育不良</div>  
                    <div class="tag-sys">发育不良</div>
                    <div class="tag-sys">发育不良</div>  
                    <div class="tag-sys">发育不良</div>  
                    <div class="tag-sys">发育不良</div>
                </div>
            </div>
</div>
</div>
</template>
<script>
import { ref, reactive,onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getPatient, getItemCate, addItemCate } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        let pid = 0;
        const patient = reactive({
            name:"",
            sex:"",
            age:"",
            mobile:"",
            idcard:"",
            address:"",
            tag:[],
            tag_other:[]
        })
        onMounted(() => {
            pid = route.params.id ? route.params.id : 0
            if(!pid){
                router.push("/Patients")
            }else{
                getPatient({id:pid}).then(res => {
                    if(res.status == 'ok'){
                        patient.name = res.data.name
                        patient.sex = res.data.sex
                        patient.age = res.data.age
                        patient.mobile = res.data.mobile
                        patient.idcard = res.data.idcard
                        patient.address = res.data.address
                        patient.tag = res.data.tags.split(',')
                        patient.tag_other = res.data.tags_other.split(',')
                    }
                })
            }

        })
        const tab = ref('zl')

        const goToDetail = () => {
            router.push("/PatientDetail")
        }
        const onClickTab = ({ title,name }) => {
            console.log(title,name)
            if(name == 'sf'){
                router.push("/Chat/"+pid)
            }
            if(name == 'lb'){
                router.push("/LiangBiao/"+pid)
            }
            if(name == 'ky'){
                router.push("/KeYan/"+pid)
            }
        };
        return {
            tab,
            goToDetail,
            onClickTab,
            patient 
        }
    }
}
</script>
<style scoped>
.top {
    padding: 5vw 0;
    text-align: center;
}

.top-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.top-name {
    margin: 8px 0;
}

.qy {
    width: fit-content;
    border: 1px solid #49B9AD;
    background: #EAFEFA;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 13px;
}

.top-btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    font-size: 14px;
    color: #1C2023;
    font-weight: 250;
}

.add-btn {
    background: #49B9AD;
    color: #FFFFFF;
    border-radius: 4px;
    width: 90vw;
    text-align: center;
    padding: 12px 8px;
    margin-top: 2vh;
}

.title {
    padding: 15px;
    font-size: 14px;
    color: #1C2023;
    font-weight: 250;
}

.item {
    padding: 15px;
    background: #FFFFFF;
    border-bottom: 1px solid #E3E4E5;

    display: flex;
    flex-direction: row;
    align-items: center;

    font-size: 16px;
    color: #1C2023;
    font-weight: 250;
}

.item-left {
    width: 26vw;
}

.tag-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.tag {
    border: 1px solid #49B9AD;
    background: #EAFEFA;
    border-radius: 10px;
    padding: 2px 8px;
    margin-right: 10px;
    font-size: 13px;
}
.more-btn{
    padding: 15px;
    background: #FFFFFF;
    text-align: center;
    color: #0052D9;
    font-weight: 250;
}
.tag-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
    align-items: center;
}
.tag-sys{
    border: 1px solid #FA541C;
    background: #FFF2E8;
    border-radius: 10px;
    padding: 2px 8px;
    margin-right: 10px;
    font-size: 13px;
    margin: 5px;
}
</style>